<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件委托</title>
  </head>
  <body>
    <div>
      <pre>e.target 获取到的是 事件源 目标阶段</pre>
      <pre>e.stopPropagation 阻止冒泡，冒泡阶段消失</pre>
      <pre>
function handle(e) {
  e.target; // 事件源，目标阶段，触发的那个dom对象。
  e.stopPropagation(); // 阻止冒泡，冒泡阶段消失。
  this; //  点击button，但事件绑定在body上，此时 this->button，e.target指的是body
}
</pre
      >
      <pre>
// 下面的代码如下在container层面添加一个相应事件，
container.onclick = function (e) {
  if (e.target.tagName === "BUTTON") {
    // xxxx处理函数
  }
};
      </pre>
    </div>
    <div id="container">
      <button id="btn1">1</button>
      <button id="btn2">2</button>
      <button id="btn3">3</button>
      <button id="btn4">4</button>
      <button id="btn5">5</button>

      <button id="btn">6</button>
      <button id="btn">7</button>
      <button id="btn">8</button>
      <button id="btn">9</button>
      <button id="btn">10</button>

      <button id="btn">11</button>
      <button id="btn">12</button>
      <button id="btn">13</button>
      <button id="btn">14</button>
      <button id="btn">15</button>

      <button id="btn">16</button>
      <button id="btn">17</button>
      <button id="btn">18</button>
      <button id="btn">19</button>
      <button id="btn">20</button>

      <button id="btn">21</button>
      <button id="btn">22</button>
      <button id="btn">23</button>
      <button id="btn">24</button>
      <button id="btn">25</button>
    </div>
  </body>
  <script>
    const container = document.querySelector("#container");
    container.addEventListener("click", (e) => {
      if (e.target.tagName === "BUTTON") {
        console.log("点击了按钮", e.target.id, e.target.innerText);
      } else {
        console.log("点击了其他元素", e.target.tagName);
      }
    });
  </script>
</html>
